﻿//-- downgrade for non-html5 browsers
//---------------------------------------------------


function supportsValidity() {
    var i = document.createElement('input');
    return typeof i.validity === 'object'
}

function setupForm() {

    $.validator.unobtrusive.parse("form");

    //-- downgrade for datetime
    if (!Modernizr.inputtypes.date) {
        $("input[type='date']").datepicker();
    }
    else {
        //-- HTML 5 is enabled and will handle validation for these fields, so let's clear out
        //   unobtrusive settings so that the browser can handle validation...
        $("input[type='date']").rules("remove");
    }


    //-- downgrade for color
    if (!Modernizr.inputtypes.color) {
        var inputs = $("input[type='color']");
        for (var i = 0; i < inputs.length; i++) {
            var inputId = inputs[i].id;
            convertToColor(inputId, inputs[i].value);
        }
    }

    //-- downgrade for number
    if (!Modernizr.inputtypes.number) {
        var numbers = $("input[type='number']");
        for (var i = 0; i < numbers.length; i++) {
            var numberId = numbers[i].id;
            createNumber(numberId);
        }
    }

    if (!Modernizr.inputtypes.email) {
        //-- downgrade for email
        var emails = $("input[type='email']");
        for (var n = 0; n < emails.length; n++) {
            setPlaceHolder(emails[n].id);
        }

    }
    else {
        //-- HTML 5 is enabled and will handle validation for these fields, so let's clear out
        //   unobtrusive settings so that the browser can handle validation...
        $("input[type='email']").rules("remove");
        //            $("input[type='email']").blur(function () {
        //                //-- on blur... validate (both are necessary)
        //                $("form").validate();
        //                $(this).valid();
        //                if (supportsValidity()) {
        //                    alert('yes');
        //                    var isvalid = $(this).validity;
        //                    $(this).checkValidity();
        //                    alert(isvalid);
        //                }
        //            });

    }


    if (!Modernizr.inputtypes.url) {
        //-- downgrade for url
        var urls = $("input[type='url']");
        for (var n = 0; n < urls.length; n++) {
            setPlaceHolder(urls[n].id);
        }

    }
    else {
        //-- HTML 5 is enabled and will handle validation for these fields, so let's clear out
        //   unobtrusive settings so that the browser can handle validation...
        $("input[type='url']").rules("remove");
    }

    //-- downgrade for tel
    if (!Modernizr.inputtypes.tel) {
        var tels = $("input[type='tel']");
        for (var n = 0; n < tels.length; n++) {
            setPlaceHolder(tels[n].id);
        }
    }
    else {
        //-- HTML 5 is enabled and will handle validation for these fields, so let's clear out
        //   unobtrusive settings so that the browser can handle validation...
        $("input[type='tel']").rules("remove");
    }

    //-- change all to buttons..
    $("input:submit, a, button", ".demo").button();
} //-- end setupForm






//-- note... my intention was to make it work for multiple color on a page
//   however there is still some js code somewhere looking for "colorSelector" specifically
//   so this won't work for more than ONE instance unless you update that javascript...
function convertToColor(id, color) {
    var div = $("<div id='colorSelector'><div style='background-color: #" + color + "'></div></div>").addClass("colorSelectorCss").ColorPicker({
        onSubmit: function (hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
            $("#" + id).val(hex);
        },
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('#colorSelector div').css("backgroundColor", "#" + hex);
        }
    });

    $('#' + id).before(div).hide();
}


function createNumber(numObj) {
    if (numObj != null && numObj.id != "undefined") {
        $("#" + numObj).spinner();
    }
}


function setPlaceHolder(id) {

    $("#" + id).filter(function () {
        return $(this).val() == "";
    }).attr("value", $("#" + id).attr("placeholder"));


    //-- so if there isn't anything in there... 
    $("#" + id).focus(function () {
        $(this).filter(function () {
            return $(this).val() == "" || $(this).val() == $(this).attr("placeholder");
        }).removeClass("watermarkOn").val("");
    });

    // Define what happens when the textbox loses focus
    // Add the watermark class and default text
    $("#" + id).blur(function () {
        $(this).filter(function () {
            // We only want this to apply if there's not
            // something actually entered
            return $(this).val() == ""
        }).addClass("watermarkOn").val($(this).attr("placeholder"));

        //-- on blur... validate (both are necessary)
        $("form").validate();
        $(this).valid();

    });
}
